<style>
  :host {
    height: 100%;
    width: 100%;
  }

  cr-grid {
    --cr-grid-gap: 8px;
  }

  #moduleContent {
    display: flex;
    justify-content: center;
  }

  .tile-item {
    color: var(--cr-primary-text-color);
    height: 120px;
    width: 170px;
  }

  img {
    border-radius: 8px;
  }
</style>
<ntp-module-header
    disable-text="[[i18nRecursive('',
                                  'modulesDisableButtonText',
                                  'modulesDummyLower')]]"
    icon-src="icons/generic_globe.svg"
    on-disable-button-click="onDisableButtonClick_">
  [[title]]
</ntp-module-header>
<div id="moduleContent">
  <cr-grid id="tiles" columns="2">
    <template id="tileList" is="dom-repeat" items="[[tiles]]">
      <div class="tile-item" title="[[item.label]]">
        <img is="cr-auto-img" auto-src="[[item.imageUrl]]"></img>
        <span>[[item.value]]</span>
      </div>
    </template>
  </cr-grid>
</div>
